Font Sizing

Was ist Font Sizing?

Font Sizing ist ein zentraler Aspekt im Webdesign für Typographie. Es bezieht sich auf die Anpassung der Schriftgröße, um die Lesbarkeit, die visuelle Hierarchie, das responsive Design und die Barrierefreiheit zu optimieren. Eine gut gewählte Schriftgröße sorgt dafür, dass Texte auf verschiedenen Bildschirmgrößen ein angenehmes Leseerlebnis bieten. Dabei spielt die Skalierung eine wichtige Rolle, da sie präzise Vorgaben für Schriftgrößen und Abstände festlegt, was zu einer konsistenten und benutzerfreundlichen Darstellung führt.

Einheiten

Um präzise Größen für Schrift zu erstellen werden verschiedene Einheiten verwendet. Hier ist ein kleiner Einblick in relevante Einheiten für Typographie:

Absolute Größen sind feste, unveränderbare Größen, welche sich nicht von einem Kontext oder der Bildschirmgröße verändern lassen. Diese werden einmal deklariert und bleiben so unverändert. Die häufigste absolute Einheit wird in Pixel (px) deklariert. Bei einem spezifischen starrem Design eignen sich Pixel hervorragend, da es absolute Kontrolle über die genauen Größen bietet.

Relative Größen orientieren sich an der Schriftgröße des jeweiligen Elternelements und sind flexibel, da sie sich dynamisch an ihre Umgebung anpassen. Zu den häufigsten relativen Einheiten gehört em. Ein Wert von 1em entspricht der Schriftgröße des Elternelements. Wenn also ein Elternelement eine Schriftgröße von 20px hat, wird ein Kindelement mit der Einstellung 2em auf eine Schriftgröße von 40px skaliert. em-Einheiten eignen sich besonders gut für modulare und wiederverwendbare Komponenten, da sie sich immer proportional zum Elternelement skalieren.
Eine weitere häufig genutzte relative Einheit ist rem, die sich auf die Schriftgröße des Root-Elements (meistens das html-Tag) bezieht. Diese Einheit ist damit unabhängiger von Verschachtelungen und bietet eine konsistente Basis. Wenn beispielsweise ein Element in einem Elternelement mit 20px Schriftgröße auf 1.5rem gesetzt wird, beträgt die Schriftgröße 24px, basierend auf der standardmäßigen Root-Größe von 16px. rem-Einheiten eignen sich daher ideal für konsistente Skalierungen im gesamten Layout, da sie unabhängig von der Hierarchie der Elemente sind und somit eine verlässliche Einheit für eine stabile und einheitliche Gestaltung bieten.

Viewport-Einheiten passen sich an die Größe des sichtbaren Bereichs des Bildschirms an. 1vw entspricht dabei 1 % der Breite des Viewports, und 1vh entspricht 1 % der Höhe. Zusätzlich gibt es die Einheiten vmin und vmax, die sich nach der kleineren oder größeren Seite des Viewports richten. Bei einer Bildschirmhöhe von 800px würde 1vmin zum Beispiel 8px entsprechen. Viewport-Einheiten eignen sich besonders gut für fluides Design, bei dem die Schrift dynamisch mit der Breite oder Höhe des Bildschirms wächst oder schrumpft und so für eine optimale Anpassung auf

/* Absoulute Größen px und pt*/
/* 1pt entspricht 1/72 Zoll */

h1 {
    font-size: 50pt;
}

p {
    font-size: 16px;
}

/* Viewport Größen */

h1 {
    font-size: 5vw; /* Die Schriftgröße passt sich der Breite des Viewports an */
  }
                        

/* Relative Größe EM */
.subtitel {
    font-size: 16px;
}
  
.subtitel p {
    font-size: 2em; /* 2em ist 32px, weil 16px * 2 = 32px */
}

/* Relative Größe REM */
html {
    font-size: 16px;
}
  
p {
    font-size: 1.5rem; /* 1.5rem ist immer 24px, da sie auf die Root-Größe verweist */
}
                        

Skalierung

Mithilfe von Skalierungsmethoden können die Schriftgrößen jetzt dynamisch angepasst werden. Hier sind ein paar Beispiele:
Root-based Scaling bezieht sich auf die Verwendung der relativen rem Einheiten, welche es möglich machen konsistente und flexible Schriftgrößen über die gesamte Webseite festzulegen. Dabei passen sich alle Schriftgrößen global an die Root-Schriftgröße an.
Clamp-based Scaling ist eine CSS Funktion, welche es ermöglicht eine dynamische Schriftgrößenskala zu erstellen. Diese basiert auf minimalen, maximalen und einem dynamischen Mittelwert.
Modular Scaling basiert auf dem Konzept, dass die Größen in einem Verhältnis zueinander stehen. Ähnlich wie Intervalle oder geometrische Proportionen werden Schriftgrößen basieren auf einem Skalierungsfaktor berechnet. Ein gängiger Ansatz ist die Verwendung von Skalen wie golden Ratio oder der Fibonacci-Folge.
Fluid Scaling bezieht sich auf die Verwendung der Viewport Einheiten um Schriftgrößen proportional zu dem Bildschirm zu skalieren.

In diesem Abschnitt werden die Methoden vorgestellt, die ausschließlich zeigen, wie Schriftgrößen mithilfe der verfügbaren Einheiten angepasst werden können. Die Skalierungsmethoden greifen dabei das Thema der responsiven Typografie auf und werden im Abschnitt „Responsive Typography“ nochmals detailliert erklärt.

/* Root-based Scaling */
html {
    font-size: 16px; /* Definiert die Basis-Schriftgröße */
}

body {
    font-size: 1rem; /* Entspricht 16px */
}

h1 {
    font-size: 2rem; /* Entspricht 32px */
}

/* Clamp-based Scaling */
body {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
}
                        

/* Modular Scaling */
:root {
    --font-size-base: 1rem; /* Grundlegende Textgröße ausgehend von 16px */
    --font-size-titel: 3rem; /* Großer Sprung für Überschriften */
    --font-size-middle: 2.25rem; /* Moderater Sprung */
    --font-size-smaller: 1.5rem; /* Kleinere Abstufung */
}

/* Fluid Scaling */
body {
    font-size: 5vw; /* Schriftgröße ist 5% der Viewport-Breite */
  }
                        

Umsetzung

Um Schriftgrößen semantisch zu skalieren, ist es hilfreich, sich auf die Rollen der Textelemente zu konzentrieren. Der Inhalt sollte strukturell und visuell so gestaltet werden, damit der Nutzer sofort erkennen kann, welche Informationen wichtig sind und wie er sich im Text orientieren kann. Hier ein paar Leitlinien für die Umsetzung von Schriftskalierung:

Starte mit den zentralen Inhalten, wie dem Haupttitel oder einer Headline, und arbeite dich schrittweise zu den weniger wichtigen Texten vor. Alternativ kannst du auch bei den weniger wichtigen Inhalten beginnen und die Hierarchie nach oben aufbauen. Jede Ebene ( Titel, Untertitel, Absätze, kurze Hinweise und Zusatzinformationen ) erhält eine eigene, sinnvolle Schriftgröße. Diese Größen können zunächst auf einer definierten Skala basieren, die anschließend bei Bedarf feinjustiert wird.

/* Semantische Skalierung */
/* Basis-Schriftgröße: 16px */
/* Ratio: 1.2 */

/* 
1:  0.694rem      6:  1.728rem
2:  0.833rem      7:  2.074rem
3:  1rem          8:  2.488rem          
4:  1.2rem        9:  2.986rem
5:  1.44rem       10: 3.583rem
*/

/* 
    Haupttitel = 3.583rem 
    Sekundärer Titel = 2.074rem 
    Absatz = 1.2rem 
    Basis = 1rem 
    Infoschnipsel = 0.833rem 
*/
                        

/* Skalierung an einem Beispiel */

html {
    font-size: 1rem;
}

h1 {
    font-size: 3.583rem;
}

h2 {
    font-size: 2.074rem;
}

p {
    font-size: 1.2rem;
}

.small-text {
    font-size: 0.833rem;
}
                        

Font Sizing auf dieser Webseite?

Die Schriftgrößen spielen auf dieser Webseite eine zentrale Rolle, da ein Großteil der Inhalte aus Text besteht. Die informationsorientierten Seiten im Blog-Stil enthalten lange Absätze, verschiedene Überschriften und kurze Textbausteine. Für jedes dieser Elemente ist eine passende Größe entscheidend, damit sie ihre jeweilige Funktion optimal erfüllen können.

Zu Beginn wurden die Größen in Pixeln festgelegt, um eine klare Basis für das Design zu schaffen. Für das finale Layout wurden die Größen jedoch auf relative REM-Einheiten umgestellt, um die Lesbarkeit und Anpassungsfähigkeit der Webseite für verschiedene Nutzer zu verbessern. REM-Einheiten bieten eine klare Struktur, da sie sich ausschließlich auf die Schriftgröße des Root-Elements beziehen, was eine konsistente Skalierung ermöglicht und die Pflege erleichtert.

Die Skalierung orientiert sich an einer Basisgröße von 16px und folgt einer Proportion von 1.125, um eine harmonische Typografie-Hierarchie zu schaffen. Dabei wurden alle Größen leicht angepasst, um dem gewünschten Design noch näher zu kommen. Diese Hierarchie reicht von Haupttiteln, sekundären Titeln, Bewertungsüberschriften und Informationstiteln bis hin zu Informationstexten, langen Absätzen, kurzen Absätzen und Button-Beschriftungen. Kleinere Elemente wie kurze Textbausteine und bestimmte Absätze nutzen die Basisgröße.

In einigen Fällen teilen sich unterschiedliche Elemente die gleiche Größe, obwohl sie unterschiedliche Funktionen erfüllen. Ein Beispiel sind die kleinen Textbausteine in den informativen Website-Karten und die kurzen Absätze in der Frage-und-Antwort-Sektion auf der Landing-Page.

/* Ausschnitt aus den Font Sizes in variables.css */
:root {
    /* font size */
    --font-size-base: 1rem;
    --font-size-xs: 0.938rem;
    --font-size-s: 1.5rem;  
    --font-size-m: 3.125rem;  
    --font-size-l: 3.5rem;  
    --font-size-xl: 6.25rem; 

    --font-size-title-text: 2.188rem;
    --font-size-aspect-title: 5rem;
    --font-size-info-title: 3.125rem;
}